<template>
  <div class="app-container">

    <el-row :gutter="20">
  <el-col :span="6"><el-input
      placeholder="请输入内容"
      v-model="listQuery.title"
      clearable>
    </el-input></el-col>
  <el-col :span="6">

 <el-button type="primary" @click.native="addDialog" icon="el-icon-add">新建</el-button>
 
  </el-col>
</el-row>

      <tdialog :itemDialog="itemDialog" v-on:taction="taction"></tdialog>
  <!-- <tree :treeData="treeData"></tree> -->
    <el-table :data="list" v-loading="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row 
    @row-click="updDialog" >
      <el-table-column align="center" label='ID' width="95">
        <template scope="scope">
          {{scope.$index}}
        </template>
      </el-table-column>
      <el-table-column label="Title">
        <template scope="scope">
          {{scope.row.title}}
        </template>
      </el-table-column>
      <el-table-column label="Author" width="110" align="center">
        <template scope="scope">
          <span>{{scope.row.author}}</span>
        </template>
      </el-table-column>
      <el-table-column label="Pageviews" width="110" align="center">
        <template scope="scope">
          {{scope.row.pageviews}}
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="Status" width="110" align="center">
        <template scope="scope">
          <el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="Display_time" width="200">
        <template scope="scope">
          <i class="el-icon-time"></i>
          <span>{{scope.row.display_time | timeFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="操作" width="200">
        <template scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
      </el-table-column>
    </el-table>
    <div>{{listQuery.page}}</div>
    <pagination :listQuery="listQuery"></pagination>
  </div>
</template>

<script>
/**
// 添加数据
this.list.unshift(this.temp);
// 删除数据
const index = this.list.indexOf(row); //找到要删除数据在list中的位置
this.list.splice(index, 1); //通过splice 删除数据

// 修改数据
const index = this.list.indexOf(row); //找到修改的数据在list中的位置
this.list.splice(index, 1,this.updatedData); //通过splice 替换数据 触发视图更新
// 赋值对象是一个obj
this.objData=Object.assign({}, row) //这样就不会共用同一个对象

// 数组我们也有一个巧妙的防范
newArray = oldArray.slice(); //slice会clone返回一个新数组
 */
import { getList, saveTab, updTab } from "@/api/table";
import { mapGetters } from "vuex";
import pagination from "@/components/pagination";
import tree from "@/components/tree";
import { formatTime } from "@/utils";
import tdialog from "./dialog";
import { Message, MessageBox } from "element-ui";

export default {
  data() {
    return {
      list: null,
      listLoading: true,
      // 分页对象
      listQuery: {
        page: 1,
        limit: 20,
        total: 0,
        importance: undefined,
        title: "",
        type: undefined,
        sort: "+id"
      },
      formatTime: formatTime,
      // 弹层对象
      itemDialog: {
        action: "add",
        avliable: false,
        item: {
          id: 1,
          name: "name"
        }
      }
    };
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger"
      };
      return statusMap[status];
    },
    // 时间过滤
    timeFilter(time) {
      return formatTime(time, "{y}-{m}-{d}");
    }
  },
  // 组件创建
  created() {
    this.fetchData();
    // this.prints()
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      getList(this.listQuery).then(response => {
        this.list = response.data.items;
        this.listLoading = false;
        this.listQuery.total = response.data.items.length;
      });
    },
    handleDelete(){},
    handleEdit(){},
    // 新建
    addDialog() {
      // 显示dialog
      this.itemDialog.avliable = true;
      //
      this.itemDialog.action = "add";
      // console.log(this.itemDialog.action + `===========` + this.itemDialog.avliable)
    },
    updDialog(row, event, column) {
      // 显示dialog
      // console.log(row + `===========` + column)
      this.itemDialog.avliable = true;
      this.itemDialog.action = "upd";
      this.itemDialog.item = row;
    },
    taction(target, action, item) {
      dialog_action[action](item);
    }
  },
  components: { pagination, tree, tdialog },
  computed: {
    ...mapGetters(["permission_routers"])
  },
  watch: {
    listQuery: {
      // 监听 listQuery 对象属性的变化
      handler: function(value) {
        console.log(this.listQuery.page);
        this.fetchData();
      },
      // 全部的属性
      deep: true
    }
  }
};
const dialog_action = {
  add: function(item) {
    console.log(`---------------------------add`);
    this.listLoading = true;
    saveTab(item).then(response => {
      this.listLoading = false;
      Message({
        message: response.msg,
        type: "success",
        duration: 3 * 1000
      });
    });
  },
  upd: function() {
    console.log(`---------------------------upd`);
    this.listLoading = true;
    updTab().then(response => {
      this.listLoading = false;
      Message({
        message: response.msg,
        type: "success",
        duration: 3 * 1000
      });
    });
  }
};
</script>
